<template>
  <div class="fillcontain">
    <!-- <search></search> -->
    <div class="contain">
      <search-item
        @showDialog="showAddFundDialog"
        @searchList="carousellist"
      ></search-item>
      <el-button @click="handleUpdate">更新缓存</el-button>
      <div class="table_container">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          highlight-current-row
          header-cell-class-name="table-header-class"
          style="width: 100%"
        >
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">
              <span
                >{{
                  scope.$index +
                  (paginations.pageIndex - 1) * paginations.pageSize +
                  1
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            property="name"
            label="轮播名称"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            property="productid"
            label="产品id"
            width="180"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column property="permission" label="注册地址" align="center">
          </el-table-column> -->
          <el-table-column property="url" label="图片" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- <el-button @click="handleEdit(scope.row)">修改</el-button> -->
              <el-button @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                v-if="paginations.total > 0"
                :page-sizes="paginations.pageSizes"
                :page-size="paginations.pageSize"
                :layout="paginations.layout"
                :total="paginations.total"
                :current-page="paginations.pageIndex"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <addFundDialog
      v-if="addFundDialog.show"
      :isShow="addFundDialog.show"
      :dialogRow="addFundDialog.dialogRow"
      @getFundList="carousellist"
      @closeDialog="hideAddFundDialog"
    ></addFundDialog>
  </div>
</template>

<script>
import { carousellist, carouseldel } from "@/api/common";
import { updatecache } from "@/api/car";
import SearchItem from "./components/searchItem";
import Search from "./components/Search.vue";
import AddFundDialog from "./components/addFundDialog";
export default {
  components: {
    Search,
    SearchItem,
    AddFundDialog,
  },
  data() {
    return {
      tableData: [],
      addFundDialog: {
        show: false,
        dialogRow: {},
      },
      loading: true,
      //需要给分页组件传的信息
      paginations: {
        total: 0, // 总数
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
    };
  },
  created() {},
  mounted() {
    this.carousellist();
  },
  methods: {
    handleUpdate() {
      let obj = {
        opcode: "Int16Array",

        page: 1,

        pagesize: 30,
      };
      updatecache(obj)
        .then((res) => {
          this.$message({
            message: "更新缓存",
            type: "success",
          });
        })
        .catch();
    },
    handleEdit() {
      this.$store.commit("SET_DIALOG_TITLE", "edit");
      this.addFundDialog.show = true;
    },
    handleDel(row) {
      this.$confirm("此操作将删除该轮播, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            id: row.id,
          };
          carouseldel(obj).then((res) => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.carousellist();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!联系管理员",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    hideAddFundDialog() {
      this.addFundDialog.show = false;
    },
    showAddFundDialog(val) {
      this.$store.commit("SET_DIALOG_TITLE", val);
      this.addFundDialog.show = true;
    },
    carousellist(data) {
      let para;
      if (data) {
        para = {
          opcode: "Int16Array",
          status: 3,
          pagesize: this.paginations.pageSize,
          page: this.paginations.pageIndex,
          ...data,
        };
      } else {
        para = {
          opcode: "111",
          name: "销售小组1",
          pagesize: this.paginations.pageSize,
          page: this.paginations.pageIndex,
        };
      }

      carousellist(para).then((res) => {
        this.loading = false;
        this.paginations.total = res.data.total;
        this.tableData = res.data.data;
      });
    },
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageSize = pageSize;
      this.carousellist();
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.carousellist();
    },
  },
};
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;
}
.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}
.pagination {
  padding: 10px 20px;
  text-align: right;
}
</style>
